<template>
    <div class="page-changeCity">
        <el-row>
            <province />
        </el-row>
        <el-row>
            <hot title="热门城市:" :list="hotList" />
        </el-row>
        <el-row>
            <hot title="最近访问:" :list="rencentList" />
        </el-row>
        <el-row>
            <categroy />
        </el-row>
    </div>
</template>

<script>
import Province from '@/components/changeCity/province.vue'
import hot from '@/components/changeCity/hot.vue'
import Categroy from '@/components/changeCity/categroy.vue'
import api from '@/api/index.js';

export default {
    components:{
        Province,
        hot,
        Categroy
    },
    data() {
        return {
            hotList:[],
            rencentList:[],
        }
    },
    created() {
      api.getHotCity().then(res => {
          this.hotList = res.data.data.map((item)=>{
              return item.name;
          })
      }),
      api.getRecentSearch().then(res => {
          this.rencentList = res.data.data.map(item => {
              return item.name;
          })
      })  
    },
}
</script>